<template>
  <div id="Nav" :style="isDark?'background-color:rgb(34,33,38);color:#999':''">
    <van-tabs  :class="isDark?'Dark':''" @click="tabClick" :color="subjectColor">
      <van-tab
        v-for="(item, index) in tabTitle"
        :key="index"
        :title="item.name"
        :name="index"
      >
        <scroll
          class="content"
          ref="scroll"
          :probeType="3"
          @scroll="contentScroll"
          :pull-up-load="true"
        >
          <NewsList :newsList="list"></NewsList>
        </scroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import "vant/lib/index.css";
import Scroll from "../Scroll";
import NewsList from "../newsList/NewList";
import {mapState} from 'vuex'

import { formatDate } from '../../common/utils'  ;
import { getNewsDetail } from "../../api/getNewsDetail";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "AboutMyself",
  components: {
    Scroll,
    NewsList,
  },
  mounted() {
    //获取我的收藏id
    this.collections = this.$route.params.collections;
    this.getList(this.collections)
    this.like = this.$route.params.like
  },
  data() {
    return {
      // 导航栏标签
      tabTitle: [
        {name:"我的收藏"},
        {name:"我的点赞"},
        {name:"我的评论"}
      ],
      saveY: 0,
      like:[],//用于储存点赞的id
      collections:[],//用于储存收藏的id
      list:[]//传递List
    };
  },
  computed: {
    ...mapState(['isDark','subjectColor'])
  },
  created() {
    
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
  },
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
  },
  beforeDestroy() {
        this.$bus.$off()
  },
  methods: {
    tabClick(name, title) {
      switch (title) {
        case "我的收藏":
          this.getList(this.collections)
          break;
        case "我的点赞":
          this.getList(this.like)
          break;
        case "我的评论":
          //this.currentType = "news_society";
          break;
      }
    },
    contentScroll() {},
    // 请求新闻数据
    
    getList(idList){
      //console.log(this.collections)
      console.log(idList)
      let collect = {
        list:[]
      }
      if(idList){
        idList.forEach(async (val)=>{
        await getNewsDetail(val).then(res=>{
            console.log(res)
            let obj = {
              title : res.data.title,
              soure : res.data.source,
              publish_time : formatDate(res.data.publish_time, 'onlyDate'),
              item_id : val
            }
            collect["list"].push(obj)
        });
        this.list = collect.list
        console.log(this.list)
      })
      }
      
    }
    
  },
};
</script>

<style scoped lang="less">
#Nav {
  height: 93vh;
  overflow: scroll;
}

.van-tabs--line .van-tabs__wrap {
  z-index: 2;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 86vh;
  overflow: hidden;
}

.van-tab__pane {
  overflow: hidden;
}

.Dark{
  background-color: rgb(52,55,64)!important;
  /deep/.van-tabs__nav{
    background-color: rgb(52,55,64)!important;
  }
  /deep/.van-tab span{
    color: #fff;
  }
  /deep/.van-tabs__line{
    background: #fff!important;
  }
}
</style>
